<template>

</template>
<script>
export default {
  props:["collapseBtnList"],
  data() {
    return {
      choose: 0 // 点击的collapse Item编号
    };
  },
  methods: {
    setChooseCollapse(index) {
      if (this.choose === index) {
        this.choose = "";
      } else {
        this.choose = index;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// collapse内容显示
.content-show {
  height: 90px;
}

// collapse内容隐藏
.content-hidden {
  height: 0px;
}

// 添加内容高度变化时动画
.content-animation {
  transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;
  -moz-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Firefox 4 */
  -webkit-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Safari 和 Chrome */
  -o-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Opera */
}

// 三角旋转
.triangle-route {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  color: #222222;
}

//  三角默认
.triangle-base {
  color: #cccccc;
}

// 三角旋转动画
.triangle-animation {
  // transition-property: all;
  // transition-duration: 0.15s;
  // transition-timing-function: cubic-bezier(0, 0.1, 0.15, 1);
  // transition-delay: 0.15s;
  transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;
  -moz-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Firefox 4 */
  -webkit-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Safari 和 Chrome */
  -o-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Opera */
}

// 文本默认
.title {
  font-size: 16px;
  font-weight: bold;
}

// 点击collapse时的文本变化
.span-click {
  color: #212121;
}

// 点击其他collapse时的文本变化
.span-lose {
  color: #888888;
}
</style>
